<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>微博网页版</title>
    <link rel="stylesheet" href="./css/chaohua（guangchang）.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./fonts/iconfont.js"></script>
    <script src="./fonts/iconfont.js"></script>
    <script src="./js/chaohua(guangchang).js"></script>
</head>

<body>
    <!-- 上导航 -->
    <header>
        <ul class="top1">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-a-chuangjian2"></use>
                </svg>
            </li>
            <li>
                <a href="./chaohua（kantie）.html"><p>看帖</p></a>
            </li>
            <li>
                <a href="./chaohua（guangchang）.html"><p>广场</p></a>

            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tianjia"></use>
                </svg>
            </li>
        </ul>
    </header>
    <!-- 搜索框 -->
    <div id="top2">
        <div class="topOut">
            <div class="search">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <input type="text" name="search" id="search" placeholder="大家正在搜：">
            </div>
        </div>
    </div>
    <!-- 横向滑动幻灯片 -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/chaohua(guangchang)/1.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./images/chaohua(guangchang)/2.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./images/chaohua(guangchang)/3.jpg" alt="">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <!-- 超话分类 -->
    <div class="xihuanderen">
        <div class="wenzi">
            <p>超话分类</p>
        </div>
        <div class="swiper s1">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./images/chaohua(guangchang)/4.jpg"></div>
              <div class="swiper-slide"><img src="./images/chaohua(guangchang)/5.jpg"></div>
              <div class="swiper-slide"><img src="./images/chaohua(guangchang)/6.jpg"></div>
              <div class="swiper-slide"><img src="./images/chaohua(guangchang)/15.jpg"></div>
              <div class="swiper-slide"><img src="./images/chaohua(guangchang)/16.jpg"></div>
              <div class="swiper-slide"><img src="./images/chaohua(guangchang)/17.jpg"></div>
            </div>
          </div>
        
    </div>
    <!-- 名人空降 -->
    <div class="xihuanderen">
        <div class="wenzi">
            <p>名人空降</p>
        </div>
        <div class="huadong">
            <div class="swiper s2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./images/chaohua(guangchang)/7.jpg">
                        <li>
                            <p>狼队</p>
                        </li>
                    </div>
                    <div class="swiper-slide"><img src="./images/chaohua(guangchang)/8.jpg">
                        <li>
                            <p>高诗岩</p>
                        </li>
                    </div>
                    <div class="swiper-slide"><img src="./images/chaohua(guangchang)/9.jpg">
                        <li>
                            <p>你的...</p>
                        </li>
                    </div>
                    <div class="swiper-slide"><img src="./images/chaohua(guangchang)/10.jpg">
                        <li>
                            <p>孟子坤</p>
                        </li>
                    </div>
                    <div class="swiper-slide"><img src="./images/chaohua(guangchang)/11.jpg">
                        <li>
                            <p>解说...</p>
                        </li>
                    </div>
                    <div class="swiper-slide"><img src="./images/chaohua(guangchang)/12.jpg">
                        <li>
                            <p>崔云峰</p>
                        </li>
                    </div>
                    <div class="swiper-slide"><img src="./images/chaohua(guangchang)/13.jpg">
                        <li>
                            <p>4AM...</p>
                        </li>
                    </div>
                    <div class="swiper-slide"><img src="./images/chaohua(guangchang)/14.jpg">
                        <li>
                            <p>翟海潮</p>
                        </li>
                    </div>
                </div>
            </div>
        </div>
          </div>
    <!-- 猜你喜欢 -->
    <div class="neirong">
    <div class="tuxiang">
         <a href="#">
            <img src="./images/shouye/21.jpg">
        </a>
    <div class="txt">
        <h3>Uman</h3>
        <span class="fujia1">12-10</span>
        <span class="fujia2">来自微博网页版</span>
        <div class="guanzhu2">
              <span>+加关注</span>
        </div>
    </div> 
    </div>
        </div>
    <div class="neirong1">
        <div class="tuxiang">
             <a href="#">
                <img src="./images/shouye/21.jpg">
            </a>
        <div class="txt">
            <h3>Uman</h3>
            <span class="fujia1">12-10</span>
            <span class="fujia2">来自微博网页版</span>
            <div class="guanzhu2">
                  <span>+加关注</span>
            </div>
        </div> 
        </div>
        </div>
    <div class="neirong1">
    <div class="tuxiang">
         <a href="#">
            <img src="./images/shouye/21.jpg">
        </a>
    <div class="txt">
        <h3>Uman</h3>
        <span class="fujia1">12-10</span>
        <span class="fujia2">来自微博网页版</span>
        <div class="guanzhu2">
              <span>+加关注</span>
        </div>
    </div> 
    </div>
    </div>
    <div class="neirong1">
        <div class="tuxiang">
             <a href="#">
                <img src="./images/shouye/21.jpg">
            </a>
        <div class="txt">
            <h3>Uman</h3>
            <span class="fujia1">12-10</span>
            <span class="fujia2">来自微博网页版</span>
            <div class="guanzhu2">
                  <span>+加关注</span>
            </div>
        </div> 
        </div>
        </div>
    <nav id="snav"></nav>
    <main></main>
    <aside></aside>
    <section id="ad"></section>
    <nav id="bnav"></nav>
    <!-- 下导航 -->
    <footer>
       <nav class="bnav">
        <div class="btnav">
            <div class="bonav">
                <a href="./shouye（guanzhu）.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye1"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">首页</a>
                </p>
            
            </div>
            <div class="bonav">
                <a href="./chaohua（guangchang）.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaohua"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">超话</a>
                </p>
            </div>
            <div class="bonav">
                <a href="./faxian.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Magnifier"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">发现</a>
                </p>
            </div>
            <div class="bonav">
                <a href="./xiaoxi.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinfeng"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">消息</a>
                </p>
            </div>
            <div class="bonav">
                <a href="./wo.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wo"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">我的</a>
                </p>
            </div>
        </div> 
    </nav>
    </footer>
    <!-- 幻灯片script -->
    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        var swiper2 = new Swiper(".mySwiper", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
      </script>
    <!-- 超话分类script -->
    <script>
        var swiper1 = new Swiper(".s1", {
          slidesPerView: 2,
          spaceBetween: 5,
        });
    </script>
    <!-- 名人空降 -->
    <script>
        var swiper2 = new Swiper(".s2", {
          slidesPerView: 4,
          spaceBetween: 5,
        });
    </script>
</body>
</html>